<template>
    <div class="orderInfoBox">
        <x-header :left-options="{showBack: true,backText:'订单详情'}" class="headerBox"></x-header>
        <group>
            <cell title="购买者" :value="order.userName"></cell>
            <cell title="订单号" :value="order.sn"></cell>
            <cell title="订单状态" :value="order.status=='paid'?'已支付':'未支付'"></cell>
            <cell title="商品名称" :value="order.targetName"></cell>
            <cell title="商品价格" :value="order.totalPrice"></cell>
            <cell title="订单价格" :value="order.amount"></cell>
            <cell title="创建时间" :value="order.createTimeTimeStr"></cell>
        </group>
        <router-link to="/myOrder">
            <div class="confirmBtn">返回</div>
        </router-link>
    </div>
</template>
<script>
    import {XHeader, Group, Cell} from 'vux'
    import {myOrderDeatil} from '@/api/index/study';

    export default {
        components: {
            Group,
            Cell,
            XHeader
        },
        data() {
            return {
                order: '',


            }
        },
        mounted() {
            myOrderDeatil(this.$route.query.id).then(res => {
                console.log(res.data.data);
                this.order = res.data.data.orders;
            }).catch(err => {
                console.log(err)
            });

        },
    }
</script>

<style lang="less" scoped>
    .orderInfoBox {
        // 头部导航
        /deep/ .headerBox {
            background-color: #fff;
            border-bottom: 1px solid #eee;

            .vux-header-left {
                left: 24px;

                .vux-header-back {
                    color: #000;
                }

                .left-arrow:before {
                    border-color: #000;
                }
            }
        }

        /deep/ .weui-cells {
            margin-top: 0;
            margin-bottom: 50px;

            .vux-cell-primary {
                flex: auto;
                flex-shrink: 0;
            }
        }

        .confirmBtn {
            width: 80%;
            height: 80px;
            margin: 0 auto;
            line-height: 80px;
            text-align: center;
            font-size: 30px;
            color: #fff;
            border-radius: 40px;
            background: linear-gradient(to right, #2eb4dd, #3482f7);
        }
    }
</style>